<template>
  <div class="feedback-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">反馈中心</h1>
        <p class="page-description">查看和处理用户反馈与问题</p>
      </div>
      <div class="page-actions">
        <el-button size="large" @click="exportData">
          <el-icon><Download /></el-icon> 导出数据
        </el-button>
      </div>
    </div>
    
    <!-- 反馈内容区域 -->
    <div class="row-container">
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 问题列表 -->
          <el-card class="feedback-list-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="card-title">问题列表</div>
              </div>
            </template>
            
            <div class="feedback-list">
              <div 
                v-for="(item, index) in feedbacks" 
                :key="index"
                class="feedback-item"
                :class="{ active: selectedFeedback && selectedFeedback.feedback_id === item.feedback_id }"
                @click="selectFeedback(item)"
              >
                <div class="feedback-item-header">
                  <span class="feedback-title">{{ item.title }}</span>
                  <el-tag size="small" :type="getStatusType(item.status)">{{ item.status }}</el-tag>
                </div>
                <div class="feedback-meta">
                  <span><el-icon><User /></el-icon> 用户ID: {{ item.user_id }}</span>
                  <span><el-icon><Phone /></el-icon> 联系方式: {{ item.phonenumber }}</span>
                  <span><el-icon><Clock /></el-icon> {{ formatTime(item.submit_time) }}</span>
                </div>
                <div class="feedback-type">
                  <el-tag size="small" :type="getTypeColor(item.type)" effect="plain">{{ item.type }}</el-tag>
                  <div class="feedback-extra-info">
                    <span v-if="item.satisfaction" class="satisfaction">
                      满意度: {{ item.satisfaction }}
                    </span>
                    <span v-if="item.assigned_admin_name" class="assigned-admin">
                      处理人: <span :class="getAdminStyle(item.assigned_admin_name)">{{ item.assigned_admin_name }}</span>
                    </span>
                    <span v-if="item.attachment_url" class="has-attachment">
                      <el-icon><Paperclip /></el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分页控件 -->
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              v-model:current-page="pagination.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
              class="pagination"
            >
            </el-pagination>
          </el-card>
        </el-col>
        
        <el-col :span="16">
          <!-- 问题详情 -->
          <el-card v-if="selectedFeedback" class="feedback-detail-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="card-title-section">
                  <div class="card-title">问题详情</div>
                  <div class="card-subtitle" v-if="selectedFeedback.assigned_admin_name">
                    处理人: <span :class="getAdminStyle(selectedFeedback.assigned_admin_name)">{{ selectedFeedback.assigned_admin_name }}</span>
                  </div>
                </div>
                <div class="detail-actions">
                  <el-button size="default" type="primary" @click="showReplyDialog">
                    <el-icon><ChatDotRound /></el-icon> 回复
                  </el-button>
                  <el-dropdown @command="handleStatusChange" size="default" split-button type="default">
                    <el-icon><Setting /></el-icon> 当前状态: {{ selectedFeedback.status }}
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="未处理" :disabled="selectedFeedback.status === '未处理'">标记为未处理</el-dropdown-item>
                        <el-dropdown-item command="处理中" :disabled="selectedFeedback.status === '处理中'">标记为处理中</el-dropdown-item>
                        <el-dropdown-item command="已回复" :disabled="selectedFeedback.status === '已回复'">标记为已回复</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
            
            <div class="feedback-detail">
              <h2 class="feedback-detail-title">{{ selectedFeedback.title }}</h2>
              
              <div class="feedback-info">
                <div class="info-item">
                  <span class="info-label">反馈类型：</span>
                  <el-tag size="small" :type="getTypeColor(selectedFeedback.type)" effect="plain">{{ selectedFeedback.type }}</el-tag>
                </div>
                <div class="info-item">
                  <span class="info-label">用户ID：</span>
                  <span>{{ selectedFeedback.user_id }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">联系方式：</span>
                  <span>{{ selectedFeedback.phonenumber }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">提交时间：</span>
                  <span>{{ formatTime(selectedFeedback.submit_time) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">最后更新：</span>
                  <span>{{ formatTime(selectedFeedback.last_update_time) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">状态：</span>
                  <el-tag size="small" :type="getStatusType(selectedFeedback.status)">
                    {{ selectedFeedback.status }}
                  </el-tag>
                </div>
                <div class="info-item" v-if="selectedFeedback.assigned_admin_name">
                  <span class="info-label">处理人：</span>
                  <span :class="getAdminStyle(selectedFeedback.assigned_admin_name)">{{ selectedFeedback.assigned_admin_name }}</span>
                </div>
                <div class="info-item" v-if="selectedFeedback.assigned_admin_id">
                  <span class="info-label">管理员ID：</span>
                  <span>{{ selectedFeedback.assigned_admin_id }}</span>
                </div>
                <div class="info-item" v-if="!selectedFeedback.assigned_admin_name">
                  <span class="info-label">处理人：</span>
                  <span>暂未分配处理人</span>
                </div>
                <div class="info-item" v-if="selectedFeedback.device_id">
                  <span class="info-label">设备ID：</span>
                  <span>{{ selectedFeedback.device_id }}</span>
                </div>
                <div class="info-item" v-if="selectedFeedback.satisfaction">
                  <span class="info-label">满意度：</span>
                  <el-rate
                    v-model="selectedFeedback.satisfaction"
                    disabled
                    show-score
                    text-color="#ff9900"
                  ></el-rate>
                </div>
                <div class="info-item" v-if="selectedFeedback.attachment_url">
                  <span class="info-label">附件：</span>
                  <el-button size="small" type="primary" link @click="openAttachment(selectedFeedback.attachment_url)">
                    查看附件
                  </el-button>
                </div>
              </div>
              
              <div class="feedback-content">
                <h3>问题描述</h3>
                <p>{{ selectedFeedback.content }}</p>
              </div>
              
              <div class="feedback-history" v-if="selectedFeedback.history && selectedFeedback.history.length">
                <h3>历史记录</h3>
                <div class="history-list">
                  <div v-for="(record, index) in selectedFeedback.history" :key="index" class="history-item">
                    <div class="history-header">
                      <span><el-icon><User /></el-icon> {{ record.user }}<span :class="getAdminStyle(record.user)">{{ record.admin_id ? ` (ID: ${record.admin_id})` : '' }}</span></span>
                      <span><el-icon><Clock /></el-icon> {{ formatTime(record.time) }}</span>
                    </div>
                    <div class="history-content">
                      {{ record.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          
          <div v-else class="no-selection">
            <el-icon><Message /></el-icon>
            <p>请选择一个问题查看详情</p>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 回复对话框 -->
    <el-dialog
      title="回复反馈"
      v-model="replyDialogVisible"
      width="50%">
      <div class="quick-reply-section">
        <div class="reply-header">
          <h3>回复人信息</h3>
          <el-input
            v-model="replyBy"
            placeholder="请输入回复人名称"
            size="default"
            class="reply-input"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </div>
        <h3>快速回复</h3>
        <div class="quick-reply-options">
          <el-button 
            v-for="(option, index) in quickReplyOptions" 
            :key="index"
            size="default" 
            @click="selectQuickReply(option)">
            {{ option.text }}
          </el-button>
        </div>
        <div class="custom-reply">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="输入自定义回复..."
            v-model="customReply">
          </el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply" :loading="replyLoading">提交回复</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 浮动操作区 -->
    <div class="floating-actions">
      <el-button type="primary" @click="fetchFeedbackList" :loading="loading" class="refresh-btn">
        <el-icon><RefreshRight /></el-icon>
      </el-button>
    </div>
    
    <!-- 底部安全区域 -->
    <div class="bottom-safe-area"></div>
  </div>
</template>

<script>
import axios from 'axios';
import { 
  Download, 
  User, 
  Phone, 
  Clock, 
  ChatDotRound, 
  Setting,
  Message,
  RefreshRight,
  Paperclip
} from '@element-plus/icons-vue'

export default {
  name: 'FeedbackCenter',
  components: {
    Download,
    User,
    Phone,
    Clock,
    ChatDotRound,
    Setting,
    Message,
    RefreshRight,
    Paperclip
  },
  data() {
    return {
      selectedFeedback: null,
      feedbacks: [],
      loading: false,
      replyDialogVisible: false,
      replyLoading: false,
      replyBy: '',
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
        totalPages: 0
      },
      filterParams: {
        status: '',
        type: ''
      },
      // 快速回复选项
      quickReplyOptions: [
        { text: '已收到您的问题，正在处理中', value: 'received' },
        { text: '请提供更多详细信息', value: 'more_info' },
        { text: '问题已解决，请确认', value: 'resolved' },
        { text: '我们将安排技术人员处理', value: 'tech_support' }
      ],
      customReply: ''
    }
  },
  created() {
    // 配置axios拦截器用于调试
    axios.interceptors.request.use(config => {
      console.log(`发送请求: ${config.method.toUpperCase()} ${config.url}`);
      return config;
    });
    
    // 从localStorage获取当前管理员信息
    try {
      const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}');
      if (adminInfo && adminInfo.admin_name) {
        this.replyBy = adminInfo.admin_name;
      }
    } catch (error) {
      console.error('获取管理员信息失败:', error);
    }
    
    // 加载反馈列表
    this.fetchFeedbackList();
  },
  methods: {
    fetchFeedbackList() {
      this.loading = true;
      const { page, pageSize } = this.pagination;
      const { status, type } = this.filterParams;
      
      // 设置最小加载时间，以避免闪烁
      const minLoadingTime = 300;
      const startTime = Date.now();
      
      axios.get('https://smartsound.top/api/admin/feedback/v1/list', {
        params: {
          page,
          page_size: pageSize,
          status,
          type
        }
      })
      .then(response => {
        const data = response.data;
        if (data.code === 0) {
          this.feedbacks = data.feedback_list;
          this.pagination.total = data.total;
          this.pagination.totalPages = data.total_pages;
          this.pagination.page = data.page;
          this.pagination.pageSize = data.page_size;
          
          // 如果有选中的反馈，更新它
          if (this.selectedFeedback) {
            const updated = this.feedbacks.find(item => item.feedback_id === this.selectedFeedback.feedback_id);
            if (updated) {
              this.selectedFeedback = updated;
            }
          }
          
          // 打印调试信息
          console.log(`已加载 ${this.feedbacks.length} 条反馈，总计 ${data.total} 条`);
        } else {
          this.$message.error(data.message || '获取反馈列表失败');
        }
      })
      .catch(error => {
        console.error('获取反馈列表出错:', error);
        this.$message.error('获取反馈列表失败，请检查网络连接');
      })
      .finally(() => {
        // 确保加载状态至少显示最小时间，避免闪烁
        const elapsedTime = Date.now() - startTime;
        const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
        
        setTimeout(() => {
          this.loading = false;
        }, remainingTime);
      });
    },
    async selectFeedback(feedback) {
      this.selectedFeedback = { ...feedback };
      
      // 获取反馈详情，确保获取到最新的分配信息
      this.fetchFeedbackDetail(feedback.feedback_id);
      
      // 获取反馈的回复历史
      this.fetchFeedbackReplies(feedback.feedback_id);
    },
    fetchFeedbackDetail(feedbackId) {
      // 从当前已加载的列表数据中查找该反馈
      const feedbackFromList = this.feedbacks.find(item => item.feedback_id === feedbackId);
      
      if (feedbackFromList) {
        // 直接使用列表中的数据
        console.log('从列表数据中获取反馈详情:', feedbackFromList);
        
        // 更新选中的反馈对象
        this.selectedFeedback = { ...feedbackFromList };
        
        // 确保显示已分配的管理员信息
        if (!feedbackFromList.assigned_admin_name) {
          console.log('该反馈尚未分配管理员');
        } else {
          console.log('已分配给管理员:', feedbackFromList.assigned_admin_name, 'ID:', feedbackFromList.assigned_admin_id);
        }
      } else {
        console.error('未找到反馈ID为', feedbackId, '的数据');
        this.$message.warning('获取反馈详情失败');
      }
    },
    // 获取反馈的回复历史
    async fetchFeedbackReplies(feedbackId) {
      try {
        console.log('获取反馈回复历史:', feedbackId);
        // 检查是否已登录
        const adminInfoStr = localStorage.getItem('adminInfo');
        if (!adminInfoStr) {
          console.error('管理员未登录');
          this.$message.warning('请先登录后再操作');
          return;
        }

        const response = await axios.get(`https://smartsound.top/api/admin/feedback/v1/get_replies`, {
          params: {
            feedback_id: feedbackId
          }
        });
        
        const data = response.data;
        if (data.code === 0) {
          // 将API返回的回复数据转换为历史记录格式
          const replyHistory = data.replies.map(reply => ({
            user: reply.reply_by,
            admin_id: reply.admin_id,
            content: reply.content,
            time: reply.reply_time,
            reply_id: reply.reply_id
          }));
          
          // 更新选中反馈的历史记录
          this.selectedFeedback.history = replyHistory;
          console.log('已获取回复历史:', replyHistory.length, '条记录');
        } else {
          console.error('获取回复历史失败:', data.message);
          this.$message.warning(data.message || '获取回复历史失败');
        }
      } catch (error) {
        console.error('获取回复历史出错:', error);
        this.$message.warning('获取回复历史失败，请检查网络连接或登录状态');
      }
    },
    getStatusType(status) {
      const types = {
        '未处理': 'warning',
        '处理中': 'primary',
        '已回复': 'success',
        '已关闭': 'info'
      };
      return types[status] || 'info';
    },
    getTypeColor(type) {
      const types = {
        'BUG': 'danger',
        '功能建议': 'success',
        '使用咨询': 'primary',
        '投诉': 'warning',
        '其他': 'info'
      };
      return types[type] || 'info';
    },
    handleCurrentChange(currentPage) {
      this.pagination.page = currentPage;
      this.fetchFeedbackList();
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.pagination.page = 1; // 重置到第一页
      this.fetchFeedbackList();
    },
    formatTime(timeString) {
      if (!timeString) return '';
      try {
        const date = new Date(timeString);
        if (isNaN(date.getTime())) return timeString; // 如果解析失败，返回原字符串
        
        // 格式化为 YYYY-MM-DD HH:MM:SS
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
      } catch (error) {
        console.error('时间格式化错误:', error);
        return timeString; // 出错时返回原字符串
      }
    },
    showReplyDialog() {
      this.replyDialogVisible = true;
      this.customReply = '';
    },
    selectQuickReply(option) {
      this.customReply = option.text;
    },
    async submitReply() {
      if (!this.customReply.trim()) {
        this.$message.warning('回复内容不能为空');
        return;
      }
      
      // 显示加载状态
      this.replyLoading = true;
      try {
        // 获取当前管理员信息
        const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}');
        const adminName = adminInfo.admin_name || this.replyBy || '技术支持';
        const adminId = adminInfo.admin_id || 0;
        
        // 发送回复到服务器
        console.log('提交回复:', {
          feedback_id: this.selectedFeedback.feedback_id,
          content: this.customReply,
          reply_by: adminName,
          admin_id: adminId
        });
        const response = await axios.post('https://smartsound.top/api/admin/feedback/v1/reply', {
          feedback_id: this.selectedFeedback.feedback_id,
          content: this.customReply,
          reply_by: adminName,
          admin_id: adminId
        });
        
        console.log('回复响应:', response.data);
        if (response.data.code === 0) {
          // 提交回复成功后，重新获取最新的回复历史
          await this.fetchFeedbackReplies(this.selectedFeedback.feedback_id);
          
          // 更新分配信息 - 设置当前管理员为该反馈的处理人
          this.selectedFeedback.assigned_admin_name = adminName;
          this.selectedFeedback.assigned_admin_id = adminId;
          
          // 更新列表中对应项的分配信息
          const feedbackIndex = this.feedbacks.findIndex(item => item.feedback_id === this.selectedFeedback.feedback_id);
          if (feedbackIndex !== -1) {
            this.feedbacks[feedbackIndex].assigned_admin_name = adminName;
            this.feedbacks[feedbackIndex].assigned_admin_id = adminId;
            this.feedbacks[feedbackIndex].status = '已回复'; // 同时更新状态
            console.log('已更新列表中的分配信息和状态');
          }
          
          // 显示分配成功的提示
          this.$message({
            message: `您已被分配为该反馈的处理人`,
            type: 'success',
            duration: 2000
          });
          
          // 仅当当前状态不是"已回复"时才更新状态
          if (this.selectedFeedback.status !== '已回复') {
            try {
              await this.updateFeedbackStatus('已回复');
              this.$message.success('回复已提交并更新状态');
            } catch (statusError) {
              console.error('更新状态失败，但回复已成功提交:', statusError);
              this.$message.warning('回复已提交，但更新状态失败');
            }
          } else {
            this.$message.success('回复已成功提交');
          }
          
          this.customReply = '';
          this.replyDialogVisible = false;
        } else {
          this.$message.error(response.data.message || '提交回复失败');
        }
      } catch (error) {
        console.error('提交回复出错:', error);
        console.error('错误详情:', error.response ? error.response.data : error.message);
        this.$message.error('提交回复失败，请检查网络连接');
      } finally {
        this.replyLoading = false;
      }
    },
    handleStatusChange(status) {
      // 避免重复设置相同状态
      if (this.selectedFeedback.status === status) {
        this.$message.info(`当前状态已经是"${status}"`);
        return;
      }
      this.updateFeedbackStatus(status);
    },
    async updateFeedbackStatus(newStatus) {
      // 检查是否需要更新状态
      if (this.selectedFeedback.status === newStatus) {
        console.log(`当前状态已经是"${newStatus}"，无需更新`);
        return; // 状态相同，不需要更新
      }
      
      console.log('更新状态:', {
        feedback_id: this.selectedFeedback.feedback_id,
        status: newStatus
      });
      try {
        // 发送状态更新到服务器
        const response = await axios.post('https://smartsound.top/api/admin/feedback/v1/update_status', {
          feedback_id: this.selectedFeedback.feedback_id,
          status: newStatus
        });
        
        console.log('状态更新响应:', response.data);
        if (response.data.code === 0) {
          // 更新成功
          this.selectedFeedback.status = newStatus;
          
          // 更新列表中的状态
          const index = this.feedbacks.findIndex(item => item.feedback_id === this.selectedFeedback.feedback_id);
          if (index !== -1) {
            this.feedbacks[index].status = newStatus;
          }
          
          this.$message.success(`状态已更新为: ${newStatus}`);
        } else {
          this.$message.error(response.data.message || '更新状态失败');
          throw new Error(response.data.message || '更新状态失败');
        }
      } catch (error) {
        console.error('更新状态出错:', error);
        // 检查是否是因为状态已经是相同值导致的错误
        if (error.response && error.response.data && error.response.data.code === 40004) {
          console.warn('状态更新提示:', error.response.data.message);
          // 这不是真正的错误，可以忽略
          this.$message.info(error.response.data.message || '状态已经是最新的');
          return; // 提前返回，不抛出错误
        }
        
        console.error('错误详情:', error.response ? error.response.data : error.message);
        this.$message.error('更新状态失败，请检查网络连接');
        throw error; // 抛出错误以便调用者知道操作失败
      }
    },
    exportData() {
      // 显示加载提示
      const loadingInstance = this.$loading({
        lock: true,
        text: '导出数据中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 请求所有反馈数据
      axios.get('https://smartsound.top/api/admin/feedback/v1/list', {
        params: {
          page: 1,
          page_size: 9999, // 请求足够大的数量以获取所有数据
          status: this.filterParams.status,
          type: this.filterParams.type
        }
      })
      .then(response => {
        const data = response.data;
        if (data.code === 0) {
          const feedbackList = data.feedback_list || [];
          
          if (feedbackList.length === 0) {
            this.$message.warning('没有可导出的数据');
            loadingInstance.close();
            return;
          }
          
          // 准备CSV数据
          const csvContent = this.convertToCSV(feedbackList);
          
          // 创建下载链接
          const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
          const url = URL.createObjectURL(blob);
          
          // 创建并点击下载链接
          const link = document.createElement('a');
          link.setAttribute('href', url);
          link.setAttribute('download', `反馈数据_${new Date().toISOString().slice(0, 10)}.csv`);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          
          this.$message.success(`成功导出${feedbackList.length}条反馈数据`);
        } else {
          this.$message.error(data.message || '导出数据失败');
        }
      })
      .catch(error => {
        console.error('导出数据出错:', error);
        this.$message.error('导出失败，请检查网络连接');
      })
      .finally(() => {
        loadingInstance.close();
      });
    },
    
    // 将反馈数据转换为CSV格式
    convertToCSV(data) {
      // CSV头部
      const headers = [
        '反馈ID',
        '标题',
        '内容',
        '类型',
        '用户ID',
        '联系方式',
        '设备ID',
        '提交时间',
        '最后更新时间',
        '状态',
        '满意度',
        '已分配管理员',
        '管理员ID',
        '附件URL'
      ];
      
      // 转换每一行数据
      const rows = data.map(item => {
        return [
          item.feedback_id,
          this.escapeCsvValue(item.title),
          this.escapeCsvValue(item.content),
          item.type,
          item.user_id,
          this.escapeCsvValue(item.phonenumber),
          item.device_id || '',
          item.submit_time,
          item.last_update_time,
          item.status,
          item.satisfaction || '',
          item.assigned_admin_name || '',
          item.assigned_admin_id || '',
          this.escapeCsvValue(item.attachment_url || '')
        ];
      });
      
      // 组合头部和行数据
      return [
        headers.join(','),
        ...rows.map(row => row.join(','))
      ].join('\n');
    },
    
    // 处理CSV中的特殊字符
    escapeCsvValue(value) {
      if (value == null) return '';
      // 替换双引号为两个双引号(CSV格式标准)
      const escaped = String(value).replace(/"/g, '""');
      // 如果值包含逗号、换行符或双引号，则用双引号包裹
      if (/[,\n"]/.test(escaped)) {
        return `"${escaped}"`;
      }
      return escaped;
    },
    openAttachment(url) {
      if (!url) {
        this.$message.warning('附件链接无效');
        return;
      }
      
      // 使用新窗口打开附件链接
      window.open(url, '_blank');
      
      // 记录操作
      console.log('打开附件链接:', url);
    },
    getAdminStyle() {
      // 所有处理人都使用同一个样式
      return 'highlighted-admin';
    }
  }
}
</script>

<style scoped>
.feedback-container {
  padding: 16px 5px;
  position: relative;
  margin-bottom: 80px;
}

/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1890ff, #722ed1);
  color: white;
  border-radius: 12px;
  padding: 32px 40px;
  margin-bottom: 35px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: skewX(-20deg);
}

.header-content {
  z-index: 1;
}

.page-title {
  font-size: 28px;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.page-description {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

.page-actions {
  z-index: 1;
  display: flex;
  gap: 10px;
}

/* 行容器样式 */
.row-container {
  margin-bottom: 30px;
  position: relative;
  z-index: 0;
}

/* 卡片基本样式 */
.el-card {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  z-index: 1;
  border-color: rgba(24, 144, 255, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
}

.feedback-list-card, .feedback-detail-card {
  height: calc(100vh - 220px);
  overflow-y: auto;
}

.feedback-list {
  margin-top: 10px;
}

.feedback-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 6px;
  margin-bottom: 5px;
}

.feedback-item:hover {
  background-color: #f5f7fa;
}

.feedback-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
}

.feedback-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.feedback-title {
  font-weight: bold;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.feedback-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
}

.feedback-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.feedback-type {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
}

.feedback-extra-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.satisfaction {
  display: flex;
  align-items: center;
  color: #e6a23c;
  font-size: 12px;
  width: 100%;
  justify-content: flex-start;
}

.assigned-admin {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
}

.assigned-admin .el-tag {
  font-size: 11px;
  padding: 0 5px;
  height: 22px;
  line-height: 20px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-info .el-tag {
  font-size: 13px;
  padding: 0 8px;
  height: 26px;
  line-height: 24px;
}

.has-attachment {
  color: #409eff;
  display: flex;
  align-items: center;
}

.feedback-detail {
  padding: 0 10px;
}

.detail-actions {
  display: flex;
  gap: 10px;
}

.feedback-detail-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  color: #303133;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.feedback-info {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-weight: bold;
  width: 80px;
  color: #606266;
  flex-shrink: 0;
}

/* 添加信息值的样式，使其向下偏移 */
.info-item span:not(.info-label) {
  position: relative;
  top: 2px;
}

.feedback-content, .feedback-history {
  margin-bottom: 20px;
}

.feedback-content h3, .feedback-history h3 {
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
}

.feedback-content p {
  color: #303133;
  line-height: 1.6;
}

.history-list {
  padding: 0;
  margin: 0;
}

.history-item {
  padding: 12px;
  border-left: 3px solid #409eff;
  background-color: #f5f7fa;
  margin-bottom: 12px;
  border-radius: 0 4px 4px 0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
}

.history-header span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-content {
  color: #303133;
  line-height: 1.6;
}

.no-selection {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  font-size: 16px;
  background-color: #f5f7fa;
  border-radius: 10px;
  padding: 40px;
  min-height: 300px;
}

.no-selection .el-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #c0c4cc;
}

/* 快速回复样式 */
.quick-reply-section {
  margin-bottom: 15px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.reply-input {
  width: 250px;
}

.quick-reply-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.custom-reply {
  margin-top: 15px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 浮动操作区 */
.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  z-index: 100;
}

.refresh-btn {
  margin-left: 0;
}

/* 底部安全区域 */
.bottom-safe-area {
  height: 60px;
  width: 100%;
  margin-top: 20px;
}

/* 按钮样式 */
.el-button {
  border-radius: 4px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  
  .page-actions {
    margin-top: 20px;
    flex-wrap: wrap;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .el-row {
    display: flex;
    flex-direction: column;
  }
  
  .el-col {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .feedback-list-card, .feedback-detail-card {
    height: auto;
    max-height: 500px;
  }
  
  .reply-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .reply-input {
    width: 100%;
    margin-top: 10px;
  }
  
  .floating-actions {
    right: 16px;
    bottom: 16px;
  }
}

/* 美化标签样式 */
.el-tag--plain {
  border-width: 1px;
  font-weight: 500;
}

.el-tag--small.el-tag--danger {
  background-color: rgba(245, 108, 108, 0.1);
}

.el-tag--small.el-tag--success {
  background-color: rgba(103, 194, 58, 0.1);
}

.el-tag--small.el-tag--primary {
  background-color: rgba(64, 158, 255, 0.1);
}

.el-tag--small.el-tag--warning {
  background-color: rgba(230, 162, 60, 0.1);
}

.el-tag--small.el-tag--info {
  background-color: rgba(144, 147, 153, 0.1);
}

/* 更新卡片标题样式 */
.card-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.highlighted-admin {
  color: #1890ff;
  font-weight: bold;
  background: linear-gradient(to right, #1890ff, #36a9e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(24, 144, 255, 0.2);
}

.highlighted-admin::after {
  content: "★";
  font-size: 0.7em;
  position: relative;
  top: -0.5em;
  margin-left: 2px;
  color: #1890ff;
}
</style>